<template>
	<!-- 航班信息-   flightMsg   -->
	<view class="flightItem " @click="goSignDetail" v-if="flightMsg.infoAirline!= undefined ">
		<view class="" style="width:95%;position: relative;">
			<view class="line1">
				<view class="left">
					<view class="airline-icon">
						<img :src="iconPath" class="img">
					</view>
					<view class="airline-title">{{flightMsg.infoAirline}}</view>
				</view>
				<view v-if="form.signStatus=='0'" class="tag" style="right: -25px;top: -10px;background-color:#48a500;">
					已签字
				</view>
				<view v-else class="tag" style="right: -25px;top: -10px;background-color:#de000f ;">
					待签字
				</view>
			</view>
			<view class="line2">
				<view style="width:50%">
					{{FlightNo}}
				</view>
				<view>{{FlightData}}</view>
			</view>
			<view class="line3">
				<view class="route" v-if="flightKind == 1 ||flightKind == 2">
					<view class="routefont">
						<span>
							{{FlightRoute[0]}}
						</span>
						
					</view>
					<span class="arrow">
						落地
						<image src="@/static/images/icon/arrow.png"></image>
					</span>
					<view class="routefont">
					<span>
						{{FlightRoute[1]}}
					</span>
					</view>
				</view>
				<view class="route" v-else>
					<view class="routefont">
						<span>{{FlightRoute[0]}}</span>
						<span>{{FlightRoute[3]}}</span>
					</view>
					<span class="arrow">
						落地
						<image src="@/static/images/icon/arrow.png"></image>
					</span>
					<view class="routefont">
						<span>{{FlightRoute[1]}}</span>
						<span>{{FlightRoute[4]}}</span>
					</view>
					<span class="arrow">
						落地
						<image src="@/static/images/icon/arrow.png"></image>
					</span>
					<view class="routefont">
						<span>{{FlightRoute[2]}}</span>
						<span>{{FlightRoute[5]}}</span>
					</view>
				</view>

			</view>
			<view class="line" style="padding-top:15px;margin-bottom:5px;">

				<span v-if="form.signStatus=='0'">
					签字时间:{{form.signatureTime}}
				</span>
				<span v-else>
					填表时间:{{form.signedTime}}
				</span>
				<span>
					NO.{{form.billInfo['info-no']}}
				</span>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getAction,
	} from "@/api/manage";
	import {
		airlineConfig
	} from '@/utils/airlineIcons.js'
	const iconPath = 'static/airlines/'
	export default {
		props: {
			form: {
				type: Object,
				default: function() {
					return {};
				}
			},
			infoAirline: {
				type: String,
				default: 'default'
			}
		},
		data() {
			return {
				flightTypeList: ['航前', '航后', '过站'],
				iconPath: '',
				flightMsg: {},
				urls: {
					msg: '/billFlight/flight/',
				}
			}
		},
		mounted() {
			this.airlineIcon()
			this.getData()
		},
		computed: {
			flightKind() {
				if (this.form.flightKind == "进港") return 1
				else if (this.form.flightKind == "出港") return 2
				else if (this.form.flightKind == "过站") return 3
			},
			FlightNo() {
				// if(this.flightKind==1)
				// return this.flightMsg
				// else if(this.flightKind==2)
				// return this.flightMsg
				// else if(this.flightKind==3)
				// return this.flightMsg

				if (this.flightKind == 1)
					return this.flightMsg.inFlightNo
				else if (this.flightKind == 2)
					return this.flightMsg.outFlightNo
				else if (this.flightKind == 3)
					return `${this.flightMsg.inFlightNo} / ${this.flightMsg.outFlightNo}`
			},
			FlightData() {
				if (this.flightKind == 1)
					return this.flightMsg.inDate
				else if (this.flightKind == 2)
					return this.flightMsg.outDate
				else if (this.flightKind == 3)
					return `${this.flightMsg.inDate} / ${this.flightMsg.outDate}`
			},
			FlightRoute() {
				if (this.flightKind == 1 && this.flightMsg.inFlightRoute)
					return this.flightMsg.inFlightRoute.split('-')
				else if (this.flightKind == 2 && this.flightMsg.outFlightRoute)
					return this.flightMsg.outFlightRoute.split('-')
				else if (this.flightKind == 3) {
					// flightRouteCity
					// flightRouteAirline
					let arr = []
					if (this.flightMsg.flightRouteCity)
						arr = this.flightMsg.flightRouteCity.split('-')
					if (this.flightMsg.flightRouteAirline)
						arr = arr.concat(this.flightMsg.flightRouteAirline.split('-'))

					return arr
				} else return []


			},
		},
		methods: {
			goSignDetail() {
				this.$emit('goSignDetail', this.form)
			},
			async getData() {
				let {
					data
				} = await getAction(`${this.urls.msg}${this.form.flightId}`)
				let list = ['inRealTime', 'inExpectedTime',
					'inPlanTime', 'boardEndTime', 'boardStartTime', 'checkStartTime',
					'outRealTime',
					'outExpectedTime', 'outPlanTime', 'checkEndTime', 'preTakeoffTime',
				]
				list.forEach(val => {
					if (data[val] != undefined)
						data[val] = data[val].replace(/^.*\s(\d{2}:\d{2}):\d{2}$/,
							'$1');
				})

				if (data.inDate != undefined)
					data.inDate = data.inDate.replace(/^(\d{4})-(\d{2})-(\d{2}).*$/, '$2-$3');
				if (data.outDate != undefined)
					data.outDate = data.outDate.replace(/^(\d{4})-(\d{2})-(\d{2}).*$/, '$2-$3');


				this.flightMsg = data
			},
			airlineIcon() {
				if (!this.infoAirline) {
					this.iconPath = iconPath + airlineConfig.default
				} else {
					const keySim = this.infoAirline.split('航空')[0]
					if (airlineConfig[this.infoAirline]) {
						this.iconPath = iconPath + airlineConfig[infoAirline]
					} else if (airlineConfig[keySim]) {
						this.iconPath = iconPath + airlineConfig[keySim]
					} else {
						this.iconPath = iconPath + airlineConfig.default
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.flightItem {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 10px;
		background: #f5f5f5;
		margin-bottom: 10px;
		border-radius: 15px;

		.line1 {
			margin-bottom: 10px;

			.left {
				display: flex;
				align-items: center;

				.airline-icon {
					background: #FFF;
					width: 25px;
					height: 25px;
					border-radius: 25px;
					padding: 3px;

					.img {
						width: 20px;
						height: 20px;
					}
				}

				.airline-title {
					margin-left: 8px;
				}

				view {
					display: inline-block;
					color: #5f5f5f;
					font: normal 700 16px PingFang-SC-Medium;
				}
			}
		}

		.line {
			margin-bottom: 10px;
			display: flex;
			justify-content: space-between;
		}

		// 航班号与时间
		.line2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15px;
			font: normal 550 14px "PingFang-SC-Heavy";
		}

		// 航线
		.line3 {
			margin-bottom: 10px;

			.route {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 0;

				image {
					width: 30px;
					height: 3px
				}

				.routefont {
				    display: flex;
				    flex-direction: column;
				    align-items: center;

					span {
						font: normal 500 16px "Adobe Heiti Std R";
						color: #1D2124;
					}
				}

				.arrow {
					display: flex;
					flex-direction: column;
				}
			}
		}

		span {
			display: inline-block;
			color: rgba(95, 95, 95, 1);
			font: normal 400 12px PingFang-SC-Medium;
		}


	}
</style>